<template>
<q-page class="q-pa-sm">
    <div class="row  shadow-10 items-center justify-between  cardbg q-pa-md q-my-sm b-radius-md">
      <div class="column">
        <div class="text-white text-subtitle1 ">
          最终执行价：
        </div>
        <div class="text-h6">
          {{ price }}{{price=='暂无'?'':'元'}}
        </div>
      </div>

      <div class="text-white text-h6 row items-end">
        <q-btn dense round icon="edit" outline @click="handlePriceEditDialog"></q-btn>
      </div>





    </div>

    <tips-title class="q-my-md text-subtitle1" title="报价明细单"></tips-title>
    <QuoteList ref="quote-list" :quoteList="quoteList" :isDark="true" :isLoad="isLoad" :noMoreQuote="noMoreQuote" @refresh-quote="handleRefreshQuote"></QuoteList>
       <my-dialog :isDark="true" :footInfo="'原价：'+price"  :isOpen="isPriceEditDialog" title="修改价格" @close="isPriceEditDialog=false" @submit="handleUpdatePrice">
         <template #content>
        <div class="q-pa-sm">
          <q-input dark label="价格" type="number" v-model="newPrice"></q-input>
        </div>

         </template>
       </my-dialog>
</q-page>
</template>

<script>
import {
    getPrice,setPrice
} from 'assets/api/studio/pm'
import {formatQuoteData} from 'assets/utils/pm'
export default {
    // name: 'PageName',
    components: {
        QuoteList: () => import("components/QuoteList")
    },

    data() {
        return {
            pid: '',
            quoteList: [],
            pageNum: 1,
            pageSize: 10,
            isLoad: true,
            isEmpty: true,
            noMoreQuote: false,
            isRefresh: false,
            price:'暂无',
            isPriceEditDialog:false,
            newPrice:0
        }
    },
    created() {
        this.pid = this.$route.params.pid;
        this.loadPrice()
    },
    beforeDestroy(){
      this.$q.loading.hide()
    },
    methods: {
      handlePriceEditDialog(){
          this.isPriceEditDialog=true;
          this.newPrice = this.price;
      },
      handleUpdatePrice(){
          if(this.newPrice){
            this.$q.loading.show()
              setPrice({
                pid:this.pid,
                price:this.newPrice
              }).then(

                res=>{
                  this.$q.loading.hide()
                  if(res.data.code==1){
                    this.$message.success(res.data.msg)
                    this.price = this.newPrice;
                    this.isPriceEditDialog=false
                  }else{
                    this.$message.error()
                  }
                }
              )
          }
      },
        loadPrice() {
            getPrice({
                pid: this.pid,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then(res => {
                console.log(res.data.data);
                let data = res.data.data;
                this.isLoad=false;
                let price = data[0][0].price
                if(price>0 && price){
                  this.price = price;
                }


                if (data[1].length == 0) {
                    this.noMoreProject = true;
                    this.isEmpty = true;
                } else if (data[1].length > 0) {
                    this.isEmpty = false;

                    this.quoteList = formatQuoteData(data[1] );
                }
            })
        },

        handleRefreshQuote(v) {
            this.pageNum += 1;
            console.log("refresh", this.pageNum);

            getPrice({
                pid: this.pid,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then((res) => {
                let data = res.data.data;
                if (data[1].length > 0) {
                    this.isEmpty = false;
                    this.quoteList = formatQuoteData(data[1]);
                    this.isRefresh = true;
                } else {
                    this.noMoreQuote = true;
                    this.$refs["quote-list"].$children[0].stop();
                }
            });
        },

    }
}
</script>
<style>
.cardbg {

  background-image: linear-gradient(30deg, #6668d781 20px, #2558ff6b, #08b6bc6e);

}
</style>
